<template>
    <div class="container">
        <div class="header">
            <div class="btn-wrapper" v-if="['vip', 'top'].includes(type)">
                <div class="btn" :class="{active: active === 0}" @click="changeActive(0)">{{tabText}}</div>
                <div class="btn" :class="{active: active === 1}" @click="changeActive(1)">查看已开通</div>
            </div>

            <div class="message" v-if="type == 'sub'">{{ subTitle }}</div>
        </div>
        <div class="main">
            <div class="main-title" v-if="['vip', 'top'].includes(type)">
                <div class="expire">到期时间:{{ expireDate | dateFmt('yyyy-MM-dd hh:mm') }}</div>
                <div class="quota">
                    <span class="tab">
                        <p>已开通/人</p>
                        <p>{{ openedNum }}</p>
                    </span>
                    <span class="tab">
                        <p>剩余资格/次</p>
                        <p>{{ restNum }}</p>
                    </span>
                </div>
            </div>
            <div class="main-list">
                <div v-if="active === 0">
                    <UserCard
                            :type="type"
                            :openType="openType"
                            :user="item"
                            v-for="(item, index) in userList"
                            :key="index"
                            @clickBtn="showConfirm"
                    ></UserCard>
                </div>

                <div v-if="active === 1">
                    <UserCard :type="type" :openType="openType" :user="item" v-for="(item, index) in openList"
                              :key="index"></UserCard>
                </div>

                <div class="note" v-if="type == 'sub'">
                    您的小号一旦绑定只能解绑一次，并将小号身份恢复到原有身份，一次解绑后，您下次绑定的小号将不再允许解绑，请您慎重考虑。
                </div>
            </div>
        </div>
        <div class="footer" v-if="active == 0">
            <input type="number" class="search" v-model="searchText" placeholder="请输入ID号"/>
            <div class="searchBtn" @click="search">查询</div>
        </div>

        <Confirm :title="confirmTitle" :isAlert="isAlert" ref="confirm" @confirm="onConfirm"></Confirm>
    </div>
</template>

<script>
    import api from '@/request/api';
    import UserCard from './user-card';
    import Confirm from '@/components/common/confirm';

    const typeMap = {
        sub: {
            opened: {
                operateKey: 'subUnBind',
                confirmTitle: '确认解绑该小号？'
            },
            toOpen: {
                operateKey: 'subBind',
                searchKey: 'subSearch',
                confirmTitle: '确认绑定该小号？'
            }
        },
        vip: {
            opened: '',
            toOpen: {
                operateKey: 'vipAuthorize',
                searchKey: 'vipTopSearch',
                confirmTitle: '确认授权vip身份？'
            }
        },
        top: {
            opened: '',
            toOpen: {
                operateKey: 'topAuthorize',
                searchKey: 'vipTopSearch',
                confirmTitle: '确定授权总代身份？'
            }
        }
    };

    export default {
        name: 'authorize',
        data() {
            return {
                active: 0, //0开通 1已开通
                tabText: '',
                isAlert: false,
                confirmTitle: '',
                expireDate: '',
                userList: [],
                openList: [], //存储已经开通的userlist
                searchText: '',
                operateUid: '', //当前操作针对的uid（开通小号等）
                openedNum: 0,
                restNum: 0
            };
        },
        props: {
            //vip sub top
            type: {
                type: String,
                default: 'vip',
                isRequired: true
            }
        },
        computed: {
            openType() {
                return this.searchText.length ? 'toOpen' : 'opened';
            },
            subTitle() {
                return this.userList.length == 0 ? '当前无小号' : '我的小号';
            }
        },
        created() {
            if (this.type === 'sub') {
                this._getSubList();
            } else {
                this._getVipTopList();
            }

            if (this.type === 'vip') {
                this.tabText = '开通免费VIP';
            } else if (this.type === 'top') {
                this.tabText = '开通免费总代';
            }
        },
        mounted() {
        },
        methods: {
            //查询当前小号列表
            _getSubList() {
                return this.request
                    .get(api.subList, {})
                    .then((res) => {
                        if (res.uid) {
                            this.userList.push(res);
                        }
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            //查询当前vip/top列表
            _getVipTopList() {
                return this.request
                    .get(api.vipTopList, {type: this.type})
                    .then((res) => {
                        if (res) {
                            this.openList = res.list;
                            this.openedNum = res.count;
                            this.restNum = res.num;
                            this.expireDate = res.end;
                        }
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            changeActive(active) {
                if (this.active === active) {
                    return;
                }
                this.active = active;
            },
            //查询固定小号
            search() {
                if (!this.searchText) {
                    this.$toast('请输入搜索ID');
                    return;
                }
                const searchKey = typeMap[this.type][this.openType].searchKey || '';

                return this.request
                    .get(api[searchKey], {uid: this.searchText, type: this.type})
                    .then((res) => {
                        this.userList.splice(0, this.userList.length);
                        if (res.uid) {
                            //不能显示开通按钮时 弹出msg
                            if (res.canchange !== 1) {
                                this.$toast(res.msg || '不能开通');
                            }

                            this.userList.push(res);
                        } else {
                            this.$toast(res.msg || '查询无结果');
                        }
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            //打开确认窗口
            showConfirm(uid) {
                this.isAlert = false;
                this.confirmTitle = typeMap[this.type][this.openType].confirmTitle || '';
                this.operateUid = uid;
                this.$refs.confirm.show();
            },
            //确认请求：开通小号 开通vip 开通总代
            onConfirm() {
                if (this.isAlert) {
                    //结果提示->重新进入页面
                    window.location.reload();
                } else {
                    //操作确认->发送请求
                    const operateKey = typeMap[this.type][this.openType].operateKey || '';
                    return this.request
                        .post(api[operateKey], {uid: this.operateUid, type: this.type})
                        .then((res) => {
                            //无论成功失败 只msg
                            this.isAlert = true;
                            this.confirmTitle = res.msg;
                            this.$refs.confirm.show();
                        })
                        .catch((err) => {
                            this.$toast.fail(err);
                        });
                }
            }
        },
        watch: {},
        components: {UserCard, Confirm}
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'

    * {
        box-sizing border-box
    }

    .container {
        position relative
        width 100vw
        height 100vh
        .header {
            height vw(55)
            background grayF
            margin-bottom middleMargin
            .btn-wrapper {
                height vw(55)
                flex-x(center, center)
                .btn {
                    secondary-hollow()
                    margin 0 vw(22)
                    word-vw(word14, gray3)
                    &.active {
                        secondary-solid()
                        word-vw(word14, grayF)
                    }
                }
            }
            .message {
                height vw(55)
                flex-x(center, center)
                word-vw(word12, gray3)
                line-height vw(16)
            }
        }
        .main {
            .main-title {
                height vw(65)
                text-align center
                .expire {
                    line-height vw(16)
                    word-vw(word12, gray3)
                    margin 0 0 smallMargin 0
                }
                .quota {
                    flex-x(center, center)
                    width 100vw
                    margin-bottom vw(7)
                    .tab {
                        margin 0 vw(39)
                        word-vw(word12, gray9)
                        p {
                            line-height vw(16)
                        }
                    }
                }
            }
            .main-list {
                .note {
                    margin titleMargin cellPadding
                    word-vw(word12, gray9)
                    line-height vw(16)
                }
            }
        }

        .footer {
            position absolute
            left 0
            bottom 0
            width 100vw
            height vw(55)
            flex-x()
            background grayF
            padding 0 cellPadding
            input {
                height vw(20)
                word-vw(word14, gray6)
            }
            .searchBtn {
                secondary-solid()
                word-vw(word14, grayF)
            }
        }

    }
</style>
